<%@ page language="java" contentType="text/html; charset=utf8"
	pageEncoding="utf8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <link rel="stylesheet" href= "/addressbook/css/base/jquery-ui.css" />
 <link rel="stylesheet" href= "/addressbook/css/demos.css" /> 
<script src="/addressbook/js/jquery-1.9.1.js"> </script> 
<script src="/addressbook/js/jquery-ui.js"> </script> 

<head>
<style type="text/css">
#table-wrapper {
	position: relative;
}

#table-scroll  {
	height: 150px;
 	overflow: auto; 
	margin-top: 40px;
} 



#table-wrapper table {
	width: 100%;
}
/* 
 #table-wrapper table * { 
 	background: yellow; 
 	color: black; 
 }  */

 #table-wrapper table thead th .text {
	position: absolute;
	top: -25px;
	z-index: 0;
	
	
	height: 25px;
	

} 
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<title><spring:message code="label.title" /></title>
</head>
<body>

<div>
 <script type="text/javascript">
     var jq = jQuery.noConflict(); 
 </script>
 
<span style = "float:right; color:blue">
<a href="<c:url value="/login.jsp" />">
	<spring:message code="label.login" />
</a>
  <br/>
<a href="<c:url value="/logout" />">
	<spring:message code="label.logout" />
</a>
  <br/>
 user: ${username} </span>
  
<h2><spring:message code="label.title" /></h2>


	<table>
		<tr>
			<td>
				<spring:message code="label.firstname" />
			</td>
			<td><input id="firstname" name="firstname" /></td>
		</tr>
		<tr>
			<td>
				<spring:message code="label.lastname" />
			</td>
			<td><input id="lastname" name="lastname" /></td>
		</tr>
		<tr>
			<td>
				<spring:message code="label.email" />
			</td>
			<td><input id="email" name="email" /></td>
		</tr>
		<tr>
			<td>
				<spring:message code="label.telephone" />
			</td>
			<td><input id="telephone" name="telephone" /></td>
		</tr>
		<tr>
			<td colspan="2"><input id="submit" class="buttons" type="submit"
				value="<spring:message code="label.addcontact"/>" onclick="AddContact()" /></td>
		</tr>
	</table>


<!--  input id="List" type="submit" value="List" onclick="List()" /-->
<br>
 
<h3><spring:message code="label.contacts" /></h3>

<sec:authorize access="hasRole('ROLE_USER')">

<div id="table-wrapper">
  <div id="table-scroll">
<c:if test="${!empty contactList}">
	<table id="tab_contact" class="data" cellspacing="0" cellpadding="0" border="1" width="100%">
	 <thead>
		<tr>
			<th><span class="text"><spring:message code="label.firstname" /></span></th>
			<th><span class="text"><spring:message code="label.email" /></span></th>
			<th><span class="text"><spring:message code="label.telephone" /></span></th>
			<th><span class="text"><button class="buttons" type="button" onclick="confirmDeletion()">Delete</button></span> </th>
		</tr>
		</thead>
		<tbody>
		<c:forEach items="${contactList}" var="contact">
			<tr>
				<td>${contact.lastname}, ${contact.firstname}</td>
				<td>${contact.email}</td>
				<td>${contact.telephone}</td>
				<td><input type="checkbox" name="delete" value="${contact.id}"></td>
			</tr>
			<!-- <td><a href="delete/${contact.id}"><spring:message code="label.delete" /></a></td>-->
		</c:forEach>
		</tbody>
	</table>
   </c:if>
   </div>
   </div>
</sec:authorize>

</div>

<div id="dialog-confirm" style="display:none;" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>


<script type="text/javascript">


function CreateContactsTable(data){
	var yourMessage = "";
	var tabHead = "<thead><tr>"
			+ "<th><span class=text><spring:message code="label.firstname" /></span></th>"
			+ "<th><span class=text><spring:message code="label.email" /></span></th>"
			+ "<th><span class=text><spring:message code="label.telephone" /></span></th>"
			+ "<th><span class=text><button class=buttons type=button onclick=confirmDeletion()>Delete</button> </span> </th>"
			+  "</tr></thead>";
	jq("#tab_contact").html("");
	
	if (data.length == 0) {
		return;
	}

	jq("#tab_contact").html(tabHead);
	jq("#tab_contact").append("<tbody>");
	// alert('success');
	// alert(data);
	for ( var index in data) {

		yourMessage = "<tr><td>"
				+ data[index].lastname
				+ ", "
				+ data[index].firstname
				+ "</td>"
				+ "<td>"
				+ data[index].email
				+ "</td>"
				+ "<td>"
				+ data[index].telephone
				+ "</td>"
			//	+ "<td><a href=delete/"+data[index].id+"><spring:message code="label.delete" /></a></td>"
				+ "<td><input type=checkbox name=delete value="+data[index].id+"></td>"
				+ "</tr>";

		jq("#tab_contact").append(yourMessage+"</tbody>");
	};
	jq(".buttons").button();
}    
    
jq(".buttons").button();

function DeleteChecked(ArrPersons){

	//  jq(document).ready(function() {
	//  alert('in doc');
	jq.ajax({
				url : "/addressbook/delete",
				type : "POST",
				async : false,
				//   processData: false,
				contentType : 'application/json; charset=utf-8',
				data : JSON.stringify(ArrPersons),
				dataType : "json",
				success : function(data) {
					CreateContactsTable(data);
				},
				error : function(xhr, ajaxOptions, thrownError) {
					alert(xhr.status + ", " + thrownError);
					if(xhr.status==401||xhr.status==403){
                    	window.location.href="/addressbook/login.jsp";
					}	
				},
				complete : function() {
				}
			});

}
/////////////////// end of DeleteChecked
function confirmDeletion() {

	var ArrPersons = new Array();
	
	jq("#tab_contact :checked").each(function() {
		//alert("value = " + jq(this).val());
		ArrPersons.push(jq(this).val());
	});

	if (ArrPersons.length == 0) {
		return;
	}
	
	jq("#dialog-confirm").dialog({
		resizable : false,
		height : 140,
		modal : true,
		buttons : {
			"Delete all items" : function() {
				jq(this).dialog("close");
				DeleteChecked(ArrPersons);
			},
			Cancel : function() {
				jq(this).dialog("close");
			}
		}
	});

	//	jq("#dialog-confirm").dialog("open");
	};


	function AddContact() {

		var firstname = jq("#firstname").val();
		var lastname = jq("#lastname").val();
		var email = jq("#email").val();
		var telephone = jq("#telephone").val();
		
		jq("#firstname").val("") ;
		jq("#lastname").val("") ;
		jq("#email").val("") ;
		jq("#telephone").val("") ;
		
	{
			try {
				jq
						.ajax({
							url : "/addressbook/addJSON",
							type : "POST",
							async : false,
							//   processData: false,
						  //  contentType : 'application/json; charset=utf-8',
							data : {
								firstname : firstname,
								lastname : lastname,
								email : email,
								telephone : telephone
							},
							dataType : "json",
							success : function(data) {
								CreateContactsTable(data);
							},
							error : function(xhr, ajaxOptions, thrownError) {
								alert(xhr.status + ", " + thrownError);
                                if(xhr.status==401||xhr.status==403){
                                	window.location.href="/addressbook/login.jsp";
                                }
                                
								//	window.location = "addressbook/login.jsp";
								

							},
							complete : function(xhr) {

								// 						if(xhr.status === 401){
								// 							alert(xhr.status);

								// 							window.location.href="/addressbook/error403.jsp";
								// 						}

							}
						});
			} catch (err) {
               
			}
		}

	};

	/* function List() {
		//  
		var yourMessage = "";
		var tabHead = "<tr>"
				+ "<th><spring:message code="label.firstname" /></th>"
				+ "<th><spring:message code="label.email" /></th>"
				+ "<th><spring:message code="label.telephone" /></th>"
				+ "<th><button type=button onclick=confirmDeletion()>Delete</button> </th>"
				+ "<th>&nbsp;</th>" + "</tr>";
		jq("#tab_contact").html("");
		//  jq(document).ready(function() {
		//  alert('in doc');
		jq
				.ajax({
					url : "/addressbook/list",
					type : "POST",
					//   processData: false,
					//  data: "list=12" ,
					dataType : "json",
					success : function(data) {
						if (data.length == 0) {
							return;
						}

						jq("#tab_contact").html(tabHead);
						// alert('success');
						// alert(data);
						for ( var index in data) {

							yourMessage = "<tr><td>"
									+ data[index].lastname
									+ ", "
									+ data[index].firstname
									+ "</td>"
									+ "<td>"
									+ data[index].email
									+ "</td>"
									+ "<td>"
									+ data[index].telephone
									+ "</td>"
									//	+ "<td><a href=delete/"+data[index].id+"><spring:message code="label.delete" /></a></td>"
									+ "<td><input type=checkbox name=delete value="+data[index].id+"></td>"
									+ "</tr>";

							jq("#tab_contact").append(yourMessage);
						}

					},
					error : function() {
						alert('error!');
					},
					complete : function() {
					}
				});
	
		//}); 
	} */
</script>
</body>
</html>
